<template>
  <div class="avatar">
    <div class="avatar_left">
      <div class="avatar_img">
        <i class="el-icon-plus"></i>
      </div>
    </div>
    <div class="avatar_right">
      <div class="right" v-for="(item, index) in avatarArr" :key="index"></div>
    </div>
  </div>
</template>

<script>
export default {
  // 组件名称
  name: "Login",
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  components: {},
  // 组件状态值
  data() {
    return {
      avatarArr: [
        { url: "", val: "1" },
        { url: "", val: "2" },
        { url: "", val: "2" },
        { url: "", val: "3" },
        { url: "", val: "4" },
        { url: "", val: "5" },
      ],
    };
  },
  // 组件初始化
  created() {},
  // 组件实例挂载完毕
  mounted() {},
  //销毁事件
  destroyed() {},
  // 组件方法
  methods: {},
};
</script>

<style scoped lang="less">
.avatar {
  width: 100%;
  height: 100%;
  display: flex;
  .avatar_left {
    width: 40%;
    height: 100%;
    display: flex;
    .avatar_img {
      width: 80%;
      height: 80%;
      border: 2px dotted #3894ff;
      border-radius: 30%;
      margin: auto;
      display: flex;
      .el-icon-plus {
        margin: auto;
        font-size: 24px;
      }
    }
  }
  .avatar_right {
    width: 50%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    .right {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      margin: auto;
      border: 1px solid gray;
      background-image: url("../assets/imgs/img.jpg");
      background-size: 100% 100%;
    }
  }
}
</style>
